<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI功能测试</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ccc; border-radius: 5px; }
        .test-result { margin: 10px 0; padding: 10px; border-radius: 3px; }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .info { background-color: #d1ecf1; color: #0c5460; }
    </style>
</head>
<body>
    <h1>Queue Admin UI 功能测试</h1>
    
    <div class="test-section">
        <h2>测试说明</h2>
        <p>请在浏览器中打开 <a href="http://localhost:5173" target="_blank">http://localhost:5173</a> 进行以下测试：</p>
    </div>

    <div class="test-section">
        <h2>1. 主题切换测试</h2>
        <div class="test-result info">
            <strong>测试步骤：</strong>
            <ol>
                <li>查看右上角的主题切换开关</li>
                <li>点击开关从 "Dark" 切换到 "Light"</li>
                <li>观察界面是否从深色主题变为浅色主题</li>
                <li>再次点击开关切换回 "Dark"</li>
                <li>观察界面是否恢复深色主题</li>
            </ol>
        </div>
        <div class="test-result success">
            <strong>预期结果：</strong> 主题切换应该立即生效，界面颜色应该在深色和浅色之间切换
        </div>
    </div>

    <div class="test-section">
        <h2>2. 侧边栏折叠测试</h2>
        <div class="test-result info">
            <strong>测试步骤：</strong>
            <ol>
                <li>查看左侧边栏，应该显示完整的菜单项文字</li>
                <li>点击侧边栏底部的折叠按钮（< 或 > 图标）</li>
                <li>观察侧边栏是否收缩，只显示图标</li>
                <li>再次点击折叠按钮</li>
                <li>观察侧边栏是否展开，显示完整菜单</li>
            </ol>
        </div>
        <div class="test-result success">
            <strong>预期结果：</strong> 侧边栏应该能够正常折叠和展开，宽度在 220px 和 64px 之间切换
        </div>
    </div>

    <div class="test-section">
        <h2>3. 顶部折叠按钮测试</h2>
        <div class="test-result info">
            <strong>测试步骤：</strong>
            <ol>
                <li>查看顶部左侧的菜单按钮（三条横线图标）</li>
                <li>点击该按钮</li>
                <li>观察侧边栏是否折叠/展开</li>
                <li>多次点击测试响应性</li>
            </ol>
        </div>
        <div class="test-result success">
            <strong>预期结果：</strong> 顶部菜单按钮应该能够控制侧边栏的折叠状态
        </div>
    </div>

    <div class="test-section">
        <h2>4. 任务操作按钮测试</h2>
        <div class="test-result info">
            <strong>测试步骤：</strong>
            <ol>
                <li>进入"任务"页面</li>
                <li>找到一个状态为 "STOPPED" 的任务</li>
                <li>点击"启动"按钮</li>
                <li>观察按钮状态是否正确更新（启动按钮禁用，停止按钮可用）</li>
                <li>点击"停止"按钮</li>
                <li>观察按钮状态是否恢复（停止按钮禁用，启动按钮可用）</li>
            </ol>
        </div>
        <div class="test-result success">
            <strong>预期结果：</strong> 按钮状态应该根据任务状态实时更新，避免重复操作
        </div>
    </div>

    <div class="test-section">
        <h2>5. 运行参数测试</h2>
        <div class="test-result info">
            <strong>测试步骤：</strong>
            <ol>
                <li>点击"新建任务"按钮</li>
                <li>填写基本信息后，在"运行参数"部分设置：</li>
                <ul>
                    <li>并发度：2</li>
                    <li>重试次数：5</li>
                    <li>退避(ms)：2000</li>
                </ul>
                <li>保存任务</li>
                <li>编辑该任务，确认参数已保存</li>
                <li>启动任务，观察日志中是否体现这些参数</li>
            </ol>
        </div>
        <div class="test-result success">
            <strong>预期结果：</strong> 运行参数应该正确保存并在任务运行时生效
        </div>
    </div>

    <div class="test-section">
        <h2>测试完成后</h2>
        <p>如果所有功能都正常工作，说明UI修复成功。如果发现问题，请记录具体的错误现象。</p>
    </div>

    <script>
        // 自动检查前端是否可访问
        fetch('http://localhost:5173')
            .then(response => {
                if (response.ok) {
                    document.body.insertAdjacentHTML('afterbegin', 
                        '<div class="test-result success"><strong>✓ 前端服务正常运行</strong> - 可以开始测试</div>'
                    );
                }
            })
            .catch(error => {
                document.body.insertAdjacentHTML('afterbegin', 
                    '<div class="test-result error"><strong>✗ 前端服务未运行</strong> - 请先启动前端服务</div>'
                );
            });
    </script>
</body>
</html>
